<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--元素删除与插入操作:针对  元素 增删改
		append() 功能:在匹配元素集合中所有元素的内部未尾插入内容
		prepend() 功能:在匹配元素集合中所有元素的内部开头插入内容
		
		after() 功能:在匹配元素集合中所有元素的外就肃尾插入内容
		before() 功能:在匹配元素集合中所有元素的外部末尾插入内容
		
		remove() 功能:使用前提:元素内容，删除元素
		empty() 功能:使用前提:元素内容，清空元素
		-->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid #959c95;
				border-radius: 5px;
				margin-top: 10px;
				padding: 10px;
			}
			.xiaoxin{
				display:block;
				width: 200px;
				height: 200px;
				color:transparent;
				background:#e4393c;
				border-radius:40%;
				background-image:url(../img/xiaoxin.png);
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="appendBtn">内部末尾插入</button>
		<button id="prependBtn">内部开头插入</button>
		<button id="afterBtn">外部后面插入</button>
		<button id="beforeBtn">外部前面插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!--1.目标显示区域-->
		<div id="target">
			<p>目标元素的默认段落</p>
		</div>
		<!--2.替换和插入的元素块区域  隐藏-->
		<div id="newElement" style="display: none;">
			<p>这是替换和插入的元素块段落</p>
		</div>
		
		<script>
			/*1.点击 内部末尾插入 按钮 实现选框内末尾插入新元素，*/
			$("#appendBtn").click(function(){
			//插入新增元素----1.1创建新元素--复制新元素 clone()
			//根据抓到元素--复制出新元素--包含原有属性和样式
			var nw=$("#newElement").clone();
			//1.复制div加p空间元素，含原有属性--显示 display:block
			nw.css("display","block");
			//1.3复制新元素并且改变属性【显示】，插入
			$("#target").append(nw);
			});
			/*2*/
			$("#prependBtn").click(function(){
			var pw=$("#newElement").clone();
			pw.css("display","block");
			$("#target").prepend(pw);
			});
			/*3*/
			$("#afterBtn").click(function(){
			var aw=$("#newElement").clone();
			aw.css("display","block");
			aw.addClass("xiaoxin");
			$("#target").after(aw);
			});
			/*4*/
			$("#beforeBtn").click(function(){
			var rw=$("#newElement").clone();
			rw.css({"display":"block",
			        "width":"200px",
					"height":"200px",
					"color":"transparent",
					"background":"#e4393c",
					"border-radius":"40%",
			        "background-image":"url(../img/xiaoxin.png)"
			});
			$("#target").before(rw);
			});
			/*5 点击 删除和清空元素*/
			$("#removeBtn").click(function(){
			$("#target").remove();
			});
			
			$("#emptyBtn").click(function(){
			$("#target").empty();
			});
			//6.点击 替换元素 按钮 将当前效果替换成新效果
			$("#replaceWithBtn").click(function(){
				//克隆新元素效果
			var c=$("#newElement").clone().css("display","block");
			$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>